import React from 'react';
import { inject, observer } from 'mobx-react';
import { Modal } from 'antd';
import MotionPreviewContent from 'components/motionsRender/components/motionPreviewContent';
import css from './index.less';

@inject('store')
@observer
export default class PreviewModal extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { temporaryMotions } = this.props.store.project.currentPages.current;
    const { preview, current } = temporaryMotions;
    const firstFrame = current.list[0];

    const modalProps = {
      visible: preview,
      onCancel: () => {
        temporaryMotions.update('preview', false);
      },
      footer: null,
      title: '预览动效',
      bodyStyle: {
        background: '#ccc'
      }
    };
    const previewProps = {
      maxWidth: 375,
      isPreview: true,
      previewMotion: current
    };
    return (
      <Modal {...modalProps}>
        <button onClick={() => {
          current.update('isPlay', true);
        }}>预览</button>
        <div className={css.layout}>
          <div className={css.screen} style={{height: `${firstFrame.height / 2}px`}}>
            {
              preview && <MotionPreviewContent {...previewProps}/>
            }
          </div>
        </div>
      </Modal>
    );
  }
}
